<div class="container-fluid container-cards-pf container-dashboard">
    <div class="row" style="min-height: 35px"></div>
    <div class="row row-cards-pf">

        <!-- Left Column -->
        <div class="col-xs-12 col-sm-6 col-md-6">

            <!-- Welcome Card -->
            <div class="card-pf card-pf-accented">
                <div class="card-pf-heading">
                    <h2 class="card-pf-title">
                        <span class="fa fa-fw fa-comment"></span>
                        <span>Welcome to <strong>Apicurio</strong>!</span>
                    </h2>
                </div>
                <div class="card-pf-body">
                    <p>
                        Hey <strong>{{ user().name }}</strong>, thanks for logging into <strong>Apicurio</strong>.  Use
                        this tool to create, modify and collaborate on new and existing APIs (with just a few clicks).
                    </p>
                    <div>
                        <ul>
                            <li><a href="http://www.apicur.io" target="_blank">Learn more about the Apicurio project</a></li>
                            <li><a href="http://www.apicur.io/roadmap" target="_blank">View our Roadmap</a></li>
                            <li><a href="http://www.apicur.io/contact" target="_blank">Question or Ideas?  Contact our development team!</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Recent APIs -->
            <div class="card-pf" *ngIf="!isLoaded('recentApis')">
                <div class="card-pf-heading">
                    <h1 class="card-pf-title">
                        <p><span class="spinner spinner-xs spinner-inline"></span> Loading Recent APIs...</p>
                    </h1>
                </div>
            </div>
            <div *ngIf="isLoaded('recentApis')">
                <div class="card-pf blank-slate-card-pf" *ngIf="recentApis.length == 0">
                    <div class="blank-slate-pf">
                        <div class="blank-slate-pf-icon">
                            <span class="pficon pficon pficon-add-circle-o"></span>
                        </div>
                        <h1>No APIs Found</h1>
                        <p>
                            We couldn't find any APIs for you - it's possible that you have not yet created/imported any APIs to the studio.
                            Or perhaps you have some APIs but haven't worked on them recently.  Pick an action below that makes sense
                            for you!
                        </p>
                        <div class="blank-slate-pf-main-action">
                            <div class="btn-group">
                                <a routerLink="/apis/create" class="btn btn-primary btn-lg"><span class="pficon pficon-add-circle-o"></span> Create New API</a>
                                <button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a routerLink="/apis/import"><span class="pficon pficon-import"></span> Import API</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recent APIs -->
                <div class="card-pf" *ngIf="isLoaded('recentApis') && recentApis.length > 0">
                    <div class="card-pf-heading">
                        <h2 class="card-pf-title">Your Recent APIs</h2>
                    </div>
                    <div class="card-pf-body api-recent-apis">
                        <div class="api-item" *ngFor="let api of recentApis">
                            <a [routerLink]="['/apis', api.id]">
                                <span class="api-icon"
                                      title="{{ api.type }}"
                                      [class.oai2-icon16]="isOpenApi20(api)"
                                      [class.oai3-icon16]="isOpenApi30(api)"
                                      [class.graphql-icon16]="isGraphQL(api)"
                                      [class.aai2-icon16]="isAsyncApi20(api)"></span><span>{{ api.name }}</span>
                            </a>
                            <p><markdown-summary [data]="api.description" emptyText="No description available."></markdown-summary></p>
                        </div>
                    </div>
                    <div style="font-size: 14px" class="card-pf-footer">
                        <p>
                            <a routerLink="/apis" class="">
                                <span class="fa fa-list"></span><span>View All APIs</span>
                            </a>
                            <span></span>
                            <a routerLink="/apis/import" class="pull-right" style="margin-left: 15px">
                                <span class="pficon pficon-import"></span><span>Import API</span>
                            </a>
                            <a routerLink="/apis/create" class="pull-right" style="margin-left: 15px">
                                <span class="pficon pficon-add-circle-o"></span><span>Create New API</span>
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column -->
        <div class="col-xs-12 col-sm-6 col-md-6">

            <!-- Loading API activity card -->
            <div class="card-pf card-pf-accented" *ngIf="!isLoaded('activity')">
                <div class="card-pf-heading">
                    <h1 class="card-pf-title">
                        <p><span class="spinner spinner-xs spinner-inline"></span> Loading User activity...</p>
                    </h1>
                </div>
            </div>

            <!-- Activity Card -->
            <div class="card-pf card-activity" *ngIf="isLoaded('activity')">
                <div class="card-pf-heading">
                    <h1 class="card-pf-title">
                        <span class="fa fa-fw fa-list"></span>
                        <span>Your Most Recent Activity</span>
                    </h1>
                </div>
                <div class="card-pf-body container-fluid">
                    <activity-item *ngFor="let item of activity" [item]="item" [mode]="'user'"></activity-item>
                    <div class="actions">
                        <button class="btn btn-default show-more"
                                *ngIf="hasMoreActivity"
                                [disabled]="gettingMoreActivity"
                                (click)="showMoreActivity()">Show More</button>
                    </div>
                    <div class="alert alert-info" *ngIf="activity.length === 0">
                        <span class="pficon pficon-info"></span>
                        <strong>No Activity Found!</strong> You haven't made any API changes yet.
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
